<%@ page import="java.util.ArrayList" %>
<%@ page import="bean.Article" %>
<%@ page import="bean.User" %><%--
  Created by IntelliJ IDEA.
  User: 蒋缇
  Date: 2020/9/16
  Time: 19:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    ArrayList<Article> articles=(ArrayList<Article>)request.getSession().getAttribute("allArticles");
    ArrayList<Article> commandArticles=(ArrayList<Article>)request.getSession().getAttribute("allCommands");
    ArrayList<User> users=(ArrayList<User>)request.getSession().getAttribute("allUsers");
    User user=(User)request.getSession().getAttribute("user");
%>
<html>
<head>
    <title>TBlog首页</title>
    <link rel="stylesheet"  href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/websiteHomepage.css">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script language="JavaScript" src="js/websiteHomepage.js"></script>
</head>
<body style="background-image: url('images/magic1.jpg'); background-size: cover;">
<%--导航条--%>
    <div class="row" >
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
<%--                    TBLOG标签--%>
                    <a class="navbar-brand" href="#">TBLOG</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="websiteHomepage.jsp">首页🏠</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        <input type="text" class="form-control" id="searchContent" size="125" maxlength="200" placeholder="请输入您想查询的内容">
                        <button type="button" onclick="search()" class="btn btn-default">🔍</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="<%=user.getHeadPortrait()==null?"images/defaultHeadPortrait.jpg":user.getHeadPortrait()%>" alt="无法加载" class="img-circle" width="20px" height="20px"><span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <%
                                    if(user.getAccount()==null){
                                %>
                                <li><a href="loginPage.jsp">用户登录</a></li>
                                <li><a href="registerPage.jsp">用户注册</a></li>
                                <li><a href="forgetPage.jsp">忘记密码</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">其他</a></li>
                                <%}else{
                                %>
                                <li><a href="personalHompage.jsp">个人中心</a></li>
                                <li><a href="loginPage.jsp">账号设置</a></li>
                                <li><a href="forgetPage.jsp">找回密码</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">其他</a></li>
                                <%
                                    }
                                %>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
<%--信息展示--%>
    <div class="row">
        <div class="col-lg-2"></div>
<%--        面板切换--%>
        <div class="col-lg-1">
            <ul class="list-group">
                <li class="list-group-item" id="0" onclick="switchPanel('s0',0)" style="background-color: #E83737">首页</li>
                <li class="list-group-item" id="1" onclick="switchPanel('s1',1)" style="background-color: white">动态</li>
                <li class="list-group-item" id="2" onclick="switchPanel('s2',2)" style="background-color: white">程序人生</li>
                <li class="list-group-item" id="3" onclick="switchPanel('s3',3)" style="background-color: white">Java</li>
                <li class="list-group-item" id="4" onclick="switchPanel('s4',4)" style="background-color: white">5G</li>
                <li class="list-group-item" id="5" onclick="switchPanel('s5',5)" style="background-color: white">数据库</li>
                <li class="list-group-item" id="6" onclick="switchPanel('s6',6)" style="background-color: white">计算机基础</li>
                <li class="list-group-item" id="7" onclick="switchPanel('s7',7)" style="background-color: white">前端</li>
            </ul>
        </div>
        <div class="col-lg-7">
<%--            首页推荐面板--%>
            <div class="show" id="s0">
                <div class="row">
                    <div class="col-lg-7">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="carousel slide" id="carousel-example-generic1" data-ride="carousel" data-interval="1500">
                                    <ol class="carousel-indicators">
                                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                                    </ol>
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img src="images/1.jpg">
                                        </div>
                                        <div class="item">
                                            <img src="images/2.jpg">
                                        </div>
                                        <div class="item">
                                            <img src="images/4.jpg">
                                        </div>
                                    </div>
                                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                        <
                                    </a>
                                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                        >
                                    </a>
                                </div>
                            </div>
                        </div>
                        <%--最新面板--%>
                        <div class="panel panel-default" id="p0">
                            <div class="panel-body">
                                <ul class="list-group">
                                    <%
                                        for(int i=0;i<articles.size();i++){
                                    %>
                                    <li class="list-group-item" ondblclick="browseBlog('<%=articles.get(i).getId()%>')"><h5><%=articles.get(i).getTitle()%></h5><font style="font-size: 5px">
                                        作者：<%=articles.get(i).getUser()%> 时间：<%=articles.get(i).getTime()%> 浏览数：<%=articles.get(i).getViews()%>
                                        类型：<%=articles.get(i).getType()%></font></li><br>
                                    <%
                                        }
                                    %>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="carousel slide" id="carousel-example-generic2" data-ride="carousel" data-interval="1500">
                                    <ol class="carousel-indicators">
                                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                                    </ol>
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img src="images/magic5.jpg">
                                        </div>
                                        <div class="item">
                                            <img src="images/magic9.jpg">
                                        </div>
                                        <div class="item">
                                            <img src="images/magic1.jpg">
                                        </div>
                                    </div>
                                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                        <
                                    </a>
                                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                        >
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="carousel slide" id="carousel-example-generic"3 data-ride="carousel" data-interval="1500">
                                    <ol class="carousel-indicators">
                                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                                    </ol>
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img src="images/magic3.jpg">
                                        </div>
                                        <div class="item">
                                            <img src="images/magic5.jpg">
                                        </div>
                                        <div class="item">
                                            <img src="images/magic6.jpg">
                                        </div>
                                    </div>
                                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                        <
                                    </a>
                                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                        >
                                    </a>
                                </div>
                            </div>
                        </div>
                        <%--今日推荐--%>
                        <div class="panel panel-default" id="p1">
                            <div class="panel-body">
                                <ul  class="list-group">
                                    <b>今日推荐</b><hr>
                                    <%
                                        for(int i=0;i<commandArticles.size();i++){
                                    %>
                                    <li class="list-group-item" ondblclick="browseBlog('<%=commandArticles.get(i).getId()%>')"><h5><%=commandArticles.get(i).getTitle()%></h5><font style="font-size: 5px">
                                        作者：<%=commandArticles.get(i).getUser()%> 时间：<%=commandArticles.get(i).getTime()%> 浏览数：<%=commandArticles.get(i).getViews()%>
                                        类型：<%=commandArticles.get(i).getType()%></font></li><br>
                                    <%
                                        }
                                    %>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<%--            动态面板--%>
            <div class="hidden" id="s1">
                <div class="panel panel-default" id="p2">
                    <div class="panel-body">
                        <ul class="list-group">
                            <%
                                for(int i=0;i<articles.size();i++){
                                    if(articles.get(i).getSubfield().equals("动态")){
                            %>
                            <li class="list-group-item" ondblclick="browseBlog('<%=articles.get(i).getId()%>')"><h5><%=articles.get(i).getTitle()%></h5><font style="font-size: 5px">
                                作者：<%=articles.get(i).getUser()%> 时间：<%=articles.get(i).getTime()%> 浏览数：<%=articles.get(i).getViews()%>
                                类型：<%=articles.get(i).getType()%></font></li>
                            <%
                                }}
                            %>
                        </ul>
                    </div>
                </div>
            </div>
<%--            程序人生面板--%>
            <div class="hidden" id="s2">
                <div class="panel panel-default" id="p3">
                    <div class="panel-body">
                        <ul class="list-group">
                            <%
                                for(int i=0;i<articles.size();i++){
                                    if(articles.get(i).getSubfield().equals("程序人生")){
                            %>
                            <li class="list-group-item" ondblclick="browseBlog('<%=articles.get(i).getId()%>')"><h5><%=articles.get(i).getTitle()%></h5><font style="font-size: 5px">
                                作者：<%=articles.get(i).getUser()%> 时间：<%=articles.get(i).getTime()%> 浏览数：<%=articles.get(i).getViews()%>
                                类型：<%=articles.get(i).getType()%></font></li>
                            <%
                                }}
                            %>
                        </ul>
                    </div>
                </div>
            </div>
<%--            Java面板--%>
            <div class="hidden" id="s3">
                <div class="panel panel-default" id="p4">
                    <div class="panel-body">
                        <ul class="list-group">
                            <%
                                for(int i=0;i<articles.size();i++){
                                    if(articles.get(i).getSubfield().equals("Java")){
                            %>
                            <li class="list-group-item" ondblclick="browseBlog('<%=articles.get(i).getId()%>')"><h5><%=articles.get(i).getTitle()%></h5><font style="font-size: 5px">
                                作者：<%=articles.get(i).getUser()%> 时间：<%=articles.get(i).getTime()%> 浏览数：<%=articles.get(i).getViews()%>
                                类型：<%=articles.get(i).getType()%></font></li>
                            <%
                                }}
                            %>
                        </ul>
                    </div>
                </div>
            </div>
<%--            5G面板--%>
            <div class="hidden" id="s4">
                <div class="panel panel-default" id="p5">
                    <div class="panel-body">
                        <ul class="list-group">
                            <%
                                for(int i=0;i<articles.size();i++){
                                    if(articles.get(i).getSubfield().equals("5G")){
                            %>
                            <li class="list-group-item" ondblclick="browseBlog('<%=articles.get(i).getId()%>')"><h5><%=articles.get(i).getTitle()%></h5><font style="font-size: 5px">
                                作者：<%=articles.get(i).getUser()%> 时间：<%=articles.get(i).getTime()%> 浏览数：<%=articles.get(i).getViews()%>
                                类型：<%=articles.get(i).getType()%></font></li>
                            <%
                                }}
                            %>
                        </ul>
                    </div>
                </div>
            </div>
<%--            数据库面板--%>
            <div class="hidden" id="s5">
                <div class="panel panel-default" id="p6">
                    <div class="panel-body">
                        <ul class="list-group">
                            <%
                                for(int i=0;i<articles.size();i++){
                                    if(articles.get(i).getSubfield().equals("数据库")){
                            %>
                            <li class="list-group-item" ondblclick="browseBlog('<%=articles.get(i).getId()%>')"><h5><%=articles.get(i).getTitle()%></h5><font style="font-size: 5px">
                                作者：<%=articles.get(i).getUser()%> 时间：<%=articles.get(i).getTime()%> 浏览数：<%=articles.get(i).getViews()%>
                                类型：<%=articles.get(i).getType()%></font></li>
                            <%
                                }}
                            %>
                        </ul>
                    </div>
                </div>
            </div>
<%--            计算机基础--%>
            <div class="hidden" id="s6">
                <div class="panel panel-default" id="p7">
                    <div class="panel-body">
                        <ul class="list-group">
                            <%
                                for(int i=0;i<articles.size();i++){
                                    if(articles.get(i).getSubfield().equals("计算机基础")){
                            %>
                            <li class="list-group-item" ondblclick="browseBlog('<%=articles.get(i).getId()%>')"><h5><%=articles.get(i).getTitle()%></h5><font style="font-size: 5px">
                                作者：<%=articles.get(i).getUser()%> 时间：<%=articles.get(i).getTime()%> 浏览数：<%=articles.get(i).getViews()%>
                                类型：<%=articles.get(i).getType()%></font></li>
                            <%
                                }}
                            %>
                        </ul>
                    </div>
                </div>
            </div>
<%--            前端--%>
            <div class="hidden" id="s7">
                <div class="panel panel-default" id="p8">
                    <div class="panel-body">
                        <ul class="list-group">
                            <%
                                for(int i=0;i<articles.size();i++){
                                    if(articles.get(i).getSubfield().equals("前端")){
                            %>
                            <li class="list-group-item" ondblclick="browseBlog('<%=articles.get(i).getId()%>')"><h5><%=articles.get(i).getTitle()%></h5><font style="font-size: 5px">
                                作者：<%=articles.get(i).getUser()%> 时间：<%=articles.get(i).getTime()%> 浏览数：<%=articles.get(i).getViews()%>
                                类型：<%=articles.get(i).getType()%></font></li>
                            <%
                                }}
                            %>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-2"></div>
    </div>
    <script type="text/javascript">
<%--        切换面板--%>
        let divs=["s0","s1","s2","s3","s4","s5","s6","s7"];
        function switchPanel(div,li){
            document.getElementById(div).className="show";//展示面板
            document.getElementsByClassName("list-group-item")[li].style.backgroundColor = "#E83737";
            for(let i=0;i<divs.length;i++){
                if(div!==divs[i]){
                    document.getElementById(divs[i]).className="hidden";//隐藏面板
                }
            }
            for(let i=0;i<8;i++){
                if(i!==li){
                    document.getElementsByClassName("list-group-item")[i].style.backgroundColor = "white";
                }
            }
        }
        //浏览博客
        function browseBlog(ArticleId){
           <%
            if(user.getAccount()==null){
           %>
                alert("请先登录");
            <%}else {
            %>
                $.ajax(
                    {
                        data: {'browseArticleId': ArticleId},
                        dataType: 'text',
                        type: 'post',
                        url: '<%=basePath%>BrowseBlogServlet',
                        success: function () {
                            window.location = "<%=basePath%>blogPage.jsp";
                        },
                        error: function () {
                            alert("查看失败");
                        }
                    }
                );
                <%
                }
                %>
            }
        //搜索博客
        function search(){
            let content=document.getElementById("searchArticleContent").value;
            if(content===""){
                alert("搜索内容不能为空");
            }else{
                $.ajax(
                    {
                        data: {'searchArticleContent': content,"action":""},
                        dataType: 'text',
                        type: 'post',
                        url: '<%=basePath%>SearchBlogServlet',
                        success: function () {
                            window.location = "<%=basePath%>searchResultPage.jsp";
                        },
                        error: function () {
                            alert("请先登录");
                        }
                    }
                );
            }
        }
    </script>
</body>
</html>